<template>
	<view class="container">
		<u-popup @touchmove.stop.prevent="moveHandle" :show="show" :round="20" mode="bottom" @close="closeShow()"
			closeOnClickOverlay>
			<view class="header-information">
				<view class="title-box">
					<view>
						<view class="title">{{device.alias? device.alias+'号_':''}}{{device.deviceTypeName}}
							<template v-if="device.deviceNo">_<text @click="copyCode(device.deviceNo)"
									class="title-blue">{{device.deviceNo}}</text></template>
							{{device.remarkName?'_'+device.remarkName:''}}
							<template v-if="$deviceTypeEnum.CONVERTIBLE_CURRENCY_MACHINE!==device.deviceTypeId
								&& $deviceTypeEnum.SUPER_MONEY_CHANGER!==device.deviceTypeId
								&& $deviceTypeEnum.VENDING_MACHINE!==device.deviceTypeId
								&& $deviceTypeEnum.SCREEN_VENDING_MACHINE!==device.deviceTypeId
								&& $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE!==device.deviceTypeId
								&& $deviceTypeEnum.BLEND_VENDING_MACHINE!==device.deviceTypeId
								&& $deviceTypeEnum.MULTI_SPLIT!==device.deviceTypeId">
								（{{device.rateEach}}{{device.measuringUnit?device.measuringUnit:''}}/次）
							</template>
							<text class="deactivate" v-if="device.status == 0">已禁用</text>
							<signal slot="value" class="u-slot-value" :level="device.networkIntensity"></signal>
						</view>
						<view class="site-box">
							<text>场地：<text>{{device.storeName}}</text></text>
						</view>
					</view>
					<view class="title-box-bottom" @click="remarkNameShow">
						<view class="title-box-bottom-text">备注</view>
						<u--image src="/static/image/pages-device/notes.png" width="32rpx" height="32rpx"></u--image>
					</view>
				</view>
				<view class="footbtn">
					<u-grid :border="false" col="4">
						<u-grid-item>
							<view class="footbtn-box" @click="showQRCodeBefore(selectLocationTypeEnum.QR_CODE)">
								<image class="bottom-image"
									:src="`${staticFileUrl}/image/pages-device/device-detail/deviceCode.png`"></image>
								<view class="footbtn-text">设备码</view>
							</view>
						</u-grid-item>
						<u-grid-item v-if="device.giftType == 1  &&
							(device.deviceTypeId == $deviceTypeEnum.VENDING_MACHINE ||
							device.deviceTypeId == $deviceTypeEnum.SCREEN_VENDING_MACHINE ||
							device.deviceTypeId == $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE ||
							device.deviceTypeId == $deviceTypeEnum.BLEND_VENDING_MACHINE) "
							@click="parameterRouting('/pages-vending-machine/restock/devices-restock')">
							<view class="footbtn-box">
								<image class="bottom-image" :src="`${staticFileUrl}/image/pages-device/restocking.png`">
								</image>
								<view class="footbtn-text">补货上架</view>
							</view>
						</u-grid-item>
						<u-grid-item v-if="device.giftType == 1 &&
							(device.deviceTypeId == $deviceTypeEnum.VENDING_MACHINE ||
							device.deviceTypeId == $deviceTypeEnum.SCREEN_VENDING_MACHINE ||
							device.deviceTypeId == $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE ||
							device.deviceTypeId == $deviceTypeEnum.BLEND_VENDING_MACHINE) "
							@click="parameterRouting('/pages-vending-machine/channel-management/channel-management')">
							<view class="footbtn-box">
								<image class="bottom-image"
									:src="`${staticFileUrl}/image/pages-device/device-detail/gift.png`"></image>
								<view class="footbtn-text">货道管理</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<u-cell-group :border="false" :customStyle="{'background': '#fff'}">
				<u-cell :border="false" v-if=" device.deviceTypeId == $deviceTypeEnum.VENDING_MACHINE ||
			device.deviceTypeId == $deviceTypeEnum.SCREEN_VENDING_MACHINE ||
			device.deviceTypeId == $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE
			 || device.deviceTypeId == $deviceTypeEnum.BLEND_VENDING_MACHINE" title="商品分类、自动退款、购物车等设置" @click="vendingTool()"
					:isLink="true" arrowDirection="right"></u-cell>
				<!-- <u-cell :border="false"
                v-if=" device.deviceTypeId == $deviceTypeEnum.VENDING_MACHINE" title="灯光、风扇、温度控制" @click="vendingMachineWenKong()"
					:isLink="true" arrowDirection="right"></u-cell> -->
				<u-cell :border="false" title="设备转场" @click="transition" :isLink="true" arrowDirection="right"></u-cell>
				<u-cell :border="false" title="设备解绑" @click="showUnbind" :isLink="true" arrowDirection="right"></u-cell>
				<u-cell :border="false" :title="device.status==1?'设备禁用':'解除禁用'" @click="showDisable" :isLink="true"
					arrowDirection="right"></u-cell>
				<u-cell :border="false" title="上线、离线时间点" @click="checkOnlineAndOffline" :isLink="true"
					arrowDirection="right"></u-cell>
			</u-cell-group>
			<u-popup @touchmove.stop.prevent="moveHandle" :show="localtionPopup" :round="20" mode="bottom"
				@close="closeShow()" closeOnClickOverlay :customStyle="{'minHeight':'500rpx',}">
				<view class="u-p-30">
					<view class="title-position">请选择仓位</view>
					<scroll-view scroll-y :style="{ height: height + 'px'}">
						<view class="u-flex-content-center" v-for="(item, index) of device.displayRackItemVoList"
							:key="index">
							<u-button :text="item.locationName" :customStyle="saveCustomStyle"
								@click="confirmLoction(item.hierarchy, item.freightLane)"></u-button>
						</view>
					</scroll-view>
				</view>
			</u-popup>
			<u-popup :show="qrCodeShow" mode="center" round="20rpx" closeable :customStyle="{'width':'600rpx',}"
				@close="qrCodeShow=false" :safeAreaInsetTop="false">
				<view class="qrCode-view">
					<!-- 二维码图片 -->
					<u-image :src="canvasUrl" mode="widthFix" height="360rpx" width="360rpx" :showMenuByLongpress="true"
						:webp="true"></u-image>

				</view>
				<mosowe-canvas-image :key="key" ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists"
					height="360" width="360" :showPreview="false" />
				<view class="qr-code-tips u-font-24 u-m-t-60">tips：长按二维码保存到手机</view>
				<view class="u-p-30 u-m-t-20 u-m-b-20">
				</view>

			</u-popup>
			<u-modal :show="remarkNameModal" title="备注名称" :closeOnClickOverlay="true" :showCancelButton="true"
				@confirm="remarkNameConfirm()" @cancel="remarkNameCancel()" ref="uRemarkNameModal" :asyncClose="true">
				<view class="slot-content u-p-40">
					<u--input class="center" inputAlign="center" :focus="remarkNameModal" v-model="remarkName"
						maxlength="20" border="bottom" placeholder="输入方便记忆的名称" clearable />
				</view>
			</u-modal>
			<u-modal :show="unbindShow" showCancelButton :show-title="false" @confirm="unbind"
				@cancel="unbindShow=false">
				<view class="unbind-view">
					<text>
						{{unBindMsg}}
					</text>
				</view>
			</u-modal>
			<!-- 禁用和非禁用弹框 -->
			<u-modal :show="disableShow" showCancelButton :title="disableTitle" @confirm="confirmDisable"
				@cancel="disableShow=false">
				<view class="unbind-view">
					<text>
						{{disableContent}}
					</text>
				</view>
			</u-modal>
		</u-popup>
		<u-popup :show="storeShow" :round="10" closeable :closeOnClickOverlay="true" :safeAreaInsetBottom="false"
			mode="center" @close="accountClose">
			<view class="popup-view">
				<view class="popup-title">
					选择转场的场地
				</view>
				<u--form labelPosition="left" ref="form1">
					<u-form-item label="场地名称" label-width="100" borderBottom ref="item1">
						<uDropdown ref="uDropdown">
							<uDropdownItem :title="storeNameItem?storeNameItem:storeList[0].label" :options="storeList"
								@change="accountChange">
							</uDropdownItem>
						</uDropdown>
					</u-form-item>
				</u--form>
				<view class="footer-btn">
					<u-button text="取消" :customStyle="stepBtnCustomStyle" shape="circle"
						@click="accountClose()"></u-button>
					<u-button type="primary" :customStyle="stepBtnCustomStyle" shape="circle" text="确定转场"
						@click="transitionConfirm()">
					</u-button>
				</view>
			</view>
		</u-popup>
		<vendingMachineTool ref="vendingMachineTool"></vendingMachineTool>
		<vendingMachineWenKong ref="vendingMachineWenKong"></vendingMachineWenKong>
	</view>
</template>

<script>
	import vendingMachineTool from '@/pages-device/device-detail/vending-machine-tool.vue'
	import vendingMachineWenKong from '@/pages-device/device-detail/vending-machine-wen-kong.vue'
	export default {
		components: {
			vendingMachineTool,
			vendingMachineWenKong
		},
		props: {
			dId: {

			},
			commodityProjectDeviceDad: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				commodityProjectDevice: {
					...this.commodityProjectDeviceDad
				},
				height: 250,
				saveCustomStyle: {
					width: '160rpx',
					height: '68rpx',
					background: 'rgb(69, 111, 255)',
					borderRadius: '10rpx',
					color: '#fff',
					marginTop: '20rpx',
				},
				positionShow: false,
				storeNameItem: '',
				show: false,
				key: 0,
				device: {
					id: '',
					alias: '',
					deviceNo: '',
					storeName: '',
					rateEach: '',
					goodsStockVoList: [],
					remarkName: '',
					deviceTypeName: '',
					giftType: 1,
					totalNumberPosition: 0,
					measuringUnit: '',
					bindGoodsTitle: '',
					status: '',
				},
				hierarchy: '',
				freightLane: '',
				numberBoxInputWidth: '160rpx',
				$deviceTypeEnum: this.$deviceTypeEnum,
				unBindMsg: '',
				unbindShow: false,
				remarkName: '',
				remarkNameSetNull: false,
				remarkNameSetNullModal: false,
				remarkNameModal: false,
				gameTime: '',
				bindGoodsTitle: '',
				deviceRateEachTitle: '',
				rateEach: 1,
				rateEachModal: false,
				qrCodeShow: false,
				disableShow: false,
				disableTitle: '',
				disableContent: '',
				terminalParamList: [],
				terminalParamMap: '',
				basicParamDataMap: '',
				basicParamDataList: [],
				// 二维码的参数
				lists: [],
				canvasUrl: '',
				staticFileUrl: this.$configPath.staticFileUrl,

				cancelCustomStyle: {
					border: '1rpx solid rgb(224, 224, 224)',
					fontSize: '28rpx',
					color: 'rgb(193,191,191)',
					width: '250rpx',
				},
				confirmCustomStyle: {
					fontSize: '28rpx',
					width: '250rpx',
				},
				storeShow: false,
				storeList: [],
				//商品分类开关 加载状态
				commodityGroupSwitchLoading: false,
				//出货失败重试 加载状态
				retryLoading: false,
				stepBtnCustomStyle: {
					width: '288rpx',
					height: '78rpx',
					borderRadius: '120px',
				},

				localtionPopup: false,
				projectBoolean: false,
				payCustomStyle: {
					width: '320rpx',
					height: '70rpx',
					background: 'rgb(96, 114, 255)',
					borderRadius: '120px',
					color: '#fff',
				},
				bindProjectBoolean: true,
				onlyOneDeductionTip: false,
				// 选择类型：1.二维码，2.单价，3.参数设置
				selectLocationType: '',
				selectLocationTypeEnum: {
					QR_CODE: 1,
					UNIT_PRICE: 2,
					PARAMETER_SETTING: 3
				},
			}
		},
		methods: {
			//售货机弹框
			vendingTool() {
				this.$refs.vendingMachineTool.init(this.device)
				this.show = false
			},
			//售货机弹框
			vendingMachineWenKong() {
				this.$refs.vendingMachineWenKong.init(this.device)
				this.show = false
			},
			//确认转场
			transitionConfirm() {
				let params = {
					deviceNo: this.device.deviceNo,
					newMerchantStore: this.newMerchantStore,
				}
				this.$api('device.deviceTransition', params).then(res => {
					if (res.status == 0) {
						uni.hideLoading();
						this.storeShow = false
						this.$helpers.toast(res.data);
						setTimeout(() => {
							this.$emit('change', false);
						}, 1000);
					} else {
						this.storeShow = false
						uni.hideLoading();
						this.$helpers.toast(res.msg);
					}
				});
			},
			//选择场地
			accountChange(e) {
				this.storeNameItem = e.label
				this.newMerchantStore = e.value
			},
			//关闭场地弹框
			accountClose() {
				this.storeShow = false
			},
			//设备转场
			transition() {
				// this.storeShow = true
				this.show = false
				this.findAllMerchantStoreByUserId()
			},
			//场地
			findAllMerchantStoreByUserId() {
				this.storeList = []
				this.storeNameItem = ''
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$api('merchantStore.findAllMerchantStoreByUserId').then(res => {
					if (res.status == 0) {
						for (let d of res.data) {
							if (this.device.merchantStoreId != d.id) {
								this.storeList.push({
									value: d.id,
									label: d.storeName,
									defaultStatus: d.defaultStatus
								})
							}
						}
						uni.hideLoading();
						if (this.storeList[0] != null) {
							this.newMerchantStore = this.storeList[0].value
							this.storeShow = true
						} else {
							this.$helpers.toast('没有其他场地可以选择！');
						}
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.data.msg);
					}
				});
			},
			init(deviceId) {
				// this.$forceUpdate()
				this.show = true;
				if (deviceId) {
					// 防止报错
					this.device.id = deviceId;
				}
				this.findOneDeviceById("", true);
				this.key += this.key;
			},
			moveHandle() {

			},
			closeShow() {
				// this.$forceUpdate()
				this.show = false;
				this.localtionPopup = false;
				this.clear();
			},
			clear() {
				// this.$forceUpdate()
				this.lists = [];
				this.canvasUrl = '';
				this.staticFileUrl = this.$configPath.staticFileUrl;
			},
			remarkNameShow() {
				this.remarkName = this.device.remarkName;
				this.remarkNameModal = true;
			},
			remarkNameCancel() {
				this.remarkNameModal = false
				this.remarkName = this.device.remarkName;
			},
			rateEachCancel() {
				this.rateEachModal = false
				this.rateEach = this.device.rateEach
			},

			nav(navUrl) {
				uni.navigateTo({
					url: navUrl
				})
			},
			copyCode(id) {
				uni.setClipboardData({
					data: id + '',
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							position: 'top'
						})
					},
					fail() {
						uni.showToast({
							title: '复制不成功',
							icon: 'none',
							position: 'top'
						})
					}
				})
			},
			showUnbind() {
				this.unBindMsg = `确定要解绑${this.device.deviceNo}设备吗？每天每台设备解绑次数有限`;
				this.unbindShow = true;
			},
			showDisable() {
				this.disableTitle = this.device.status == 0 ? '解除禁用' : '禁用'
				this.disableContent = this.device.status == 0 ? '确认解除禁用吗？' : '禁用后设备将无法购买、启动、投币'
				this.disableShow = true;
			},
			checkOnlineAndOffline() {
				this.show = false
				uni.navigateTo({
					url: '/pages-device/device-manage/device-online-offline?id=' + this.device.id
				})
			},
			//商品分类开关
			commodityGroupSwitchOperation(e, device) {
				this.commodityGroupSwitchLoading = true;
				this.$api('device.updateCommodityGroupSwitch', device).then(res => {
					uni.hideLoading();
					this.commodityGroupSwitchLoading = false;
					if (res.status == 0) {
						if (res.data > 0) {
							this.$helpers.toast('操作成功');
						}
					} else {
						this.$helpers.toast('操作异常:' + res.msg);
					}
				}).catch(() => {
					this.commodityGroupSwitchLoading = false;
					uni.hideLoading();
				});
			},
			//重试功能开关
			retryOperation(e, device) {
				this.retryLoading = true;
				this.$api('device.updateCommodityGroupSwitch', device).then(res => {
					uni.hideLoading();
					this.retryLoading = false;
					if (res.status == 0) {
						if (res.data > 0) {
							this.$helpers.toast('操作成功');
						}
					} else {
						this.$helpers.toast('操作异常:' + res.msg);
					}
				}).catch(() => {
					this.retryLoading = false;
					uni.hideLoading();
				});
			},

			unbind() {
				uni.showLoading({
					title: '解绑中...',
					mask: true
				})

				let params = {
					id: this.device.id,
					username: this.device.username,
					name: this.device.name
				}
				this.$api('device.updateUnbindDevice', params)
					.then(res => {
						if (res.status == 0) {
							uni.hideLoading();
							this.$helpers.toast('解绑成功');
							this.unbindShow = false;
							this.show = false;
							this.$emit('change', false);
							//获取所有页面栈实例列表
							let pages = getCurrentPages();
							//上一页页面实例
							let indexPage = pages[pages.length - 2];
							indexPage.$vm.findAllDeviceByConditionAndPage();

							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000);
						} else {
							uni.hideLoading();
							this.$helpers.toast('解绑失败:' + res.msg);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			confirmDisable() {
				uni.showLoading({
					title: '操作中',
					mask: true
				})

				let params = {
					id: this.device.id,
					status: this.device.status == 0 ? 1 : 0,
				}
				this.$api('device.upDisableDevice', params)
					.then(res => {
						if (res.status == 0) {
							uni.hideLoading();
							let name = this.device.status == 1 ? '禁用成功' : '解除成功'
							this.$helpers.toast(name);
							this.disableShow = false;
							this.show = false;
							setTimeout(() => {
								this.$emit('change', false);
							}, 1000);

						} else {
							uni.hideLoading();
							this.$helpers.toast('操作:' + res.msg);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			parameterRouting(url) {
				uni.navigateTo({
					url: url + '?id=' + this.device.id + '&deviceNo=' + this.device.deviceNo + '&isBluetooth=' +
						this.device.isBluetooth
				})
			},
			editGoods() {
				this.$u.route('/pages-device/twisted-egg/twisted-egg', {
					from: 'device-detail',
					deviceId: this.device.id,
					deviceTypeId: this.device.deviceTypeId,
				});
			},
			remarkNameConfirm() {
				this.remarkNameModal = false;
				if (this.$u.test.isEmpty(this.remarkName)) {
					this.remarkNameSetNullModal = true;
					this.remarkNameSetNull = true;
				} else {
					this.remarkName = this.$u.trim(this.remarkName, 'all')
					this.remarkNameSetNull = false;
				}

				if (this.remarkNameSetNull) {
					return;
				}

				if (this.remarkName.length > 20) {
					this.$helpers.toast('设备备注名称最大长度为20个字');
					return
				}

				this.updateDeviceRemarkNameById();
			},
			updateDeviceRemarkNameById() {
				let param = {
					id: this.device.id,
					deviceNo: this.device.deviceNo,
					remarkName: this.remarkName,
				}
				this.$api('device.updateDeviceRemarkNameById', param)
					.then(res => {
						if (res.status == 0) {
							this.remarkNameModal = false;
							this.remarkNameSetNull = false;
							this.remarkNameSetNullModal = false;
							this.$helpers.toast('修改成功', 'success', 2000, true, () => {
								this.findOneDeviceById("", false);
							});
						} else {
							uni.hideLoading();
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			updateDeviceById(param) {
				this.$api('device.updateDeviceById', param)
					.then(res => {
						if (res.status == 0) {
							this.rateEachModal = false;
							this.$helpers.toast('修改成功', 'success', 2000, true, () => {
								this.findOneDeviceById("", false);
								this.$parent.overloadData();
							})
						} else {
							uni.hideLoading();
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			findOneDeviceById(type, isLoad) {
				if (isLoad) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
				}

				let param = {
					id: this.device.id,
				}
				this.$api('device.findOneDeviceByIdAndPermission', param)
					.then(res => {
						uni.hideLoading();
						if (res.status == 0) {
							this.device = res.data;
							// console.log("结果", this.device)
							this.bindGoodsTitle = '已绑定' + this.device.goodsStockVoList.length + '个礼品'
							this.deviceRateEachTitle = '多少' + this.device.measuringUnit + '1局';
							if (this.$u.test.isEmpty(this.device.remarkName)) {
								this.device.remarkName = "";
							}
						} else {
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
					.catch(() => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						uni.hideLoading();
					});
			},

			showQRCodeBefore(selectLocationType) {

				this.selectLocationType = selectLocationType;
				if (this.$deviceTypeEnum.GASHAPON_MACHINE == this.device.deviceTypeId) {
					if (this.$u.test.isEmpty(this.device.displayRackItemVoList) || this.device.displayRackItemVoList
						.length <= 1) {
						// 是扭蛋机类型，但是仓位数量小于等于1
						this.showQRCode()
					} else {
						this.localtionPopup = true;
					}
					return;
				}

				if (this.$deviceTypeEnum.MULTI_SPLIT == this.device.deviceTypeId) {
					this.localtionPopup = true;
					return;
				}

				this.showQRCode()
			},

			confirmLoction(hierarchy, freightLane) {
				this.hierarchy = hierarchy;
				this.freightLane = freightLane;
				if (this.selectLocationTypeEnum.QR_CODE == this.selectLocationType) {
					this.showQRCode(hierarchy, freightLane)
				} else if (this.selectLocationTypeEnum.UNIT_PRICE == this.selectLocationType) {
					for (let i = 0; i < this.device.displayRackItemVoList.length; i++) {
						if (this.device.displayRackItemVoList[i].hierarchy == hierarchy) {
							this.rateEach = this.device.displayRackItemVoList[i].rateEach;
							this.localtionPopup = false;
							this.rateEachModal = true;
							break;
						}
					}
				} else if (this.selectLocationTypeEnum.PARAMETER_SETTING == this.selectLocationType) {
					
				} else {

				}
			},


			showQRCode(hierarchy, freightLane) {
				if (this.localtionPopup) {
					this.localtionPopup = false;
				}

				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let p = {
					deviceNo: this.device.deviceNo,
					hierarchy: '',
					freightLane: '',
				}

				let fileName = "".concat(this.device.deviceNo)
				if (hierarchy) {
					p.hierarchy = hierarchy;
					fileName = fileName.concat("-").concat(hierarchy)
				}
				if (freightLane) {
					p.freightLane = freightLane;
				}

				this.$api('device.findClientUrl', p)
					.then(res => {
						if (res.status == 0) {
							uni.hideLoading();

							let bgImgs = {
								type: 'image',
								content: '/static/image/whiet.png',
								width: 360,
								height: 360,
								x: 0,
								y: 0,
							}
							this.lists.push(bgImgs)
							let url = res.data;
							// 二维码
							let param = {
								type: 'qr',
								content: url,
								width: 300,
								height: 300,
								x: 30,
								y: 31,
							}
							this.lists.push(param)
							let bgImg = {
								type: 'image',
								content: '/static/image/whiet.png',
								width: 120,
								height: 40,
								x: 117,
								y: 170,
								arc: false,
								arcX: 0,
								arcY: 0,
								arcR: 0,
							}
							this.lists.push(bgImg)
							let tips = {
								type: 'text',
								content: fileName,
								maxWidth: 460,
								width: 460,
								x: 360 / 2,
								y: 199,
								color: '#000',
								size: 24,
								align: "center"
							}
							this.lists.push(tips)
							this.createCanvas();
							// this.qrcode = this.$mQrCode.createQrCodeImg(url, {
							// 	size: parseInt(300) //二维码大小
							// })

							this.qrCodeShow = true;
						} else {
							uni.hideLoading();
							this.$helpers.toast('显示设备二维码失败:' + res.msg);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			createCanvas() {
				// console.log(this.lists, "绘画前参数")
				// this.$forceUpdate()
				this.$refs.mosoweCanvasComponents.createCanvas(this.lists);
			},
			// 生成完回调
			_canvasImage(e) {
				this.canvasUrl = e;
				// console.log(e, "eeee")
			},

			navSwipeCard() {
				this.findCommodityProjectDevice();
				this.projectBoolean = true
				this.show = false;
			},
			//查询设备是否绑定了游玩项目
			findCommodityProjectDevice() {
				let param = {
					deviceId: this.device.id
				};
				this.$api('commodityProjectDevice.findOneCommodityProjectDeviceByDeviceId', param).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						if (res.data != null) {
							this.commodityProjectDevice.id = res.data.id;
							this.commodityProjectDevice.name = res.data.name
							this.commodityProjectDevice.coinPrice = res.data.coinPrice
							this.commodityProjectDevice.ticketPackagePrice = res.data.ticketPackagePrice
							this.commodityProjectDevice.commodityProjectId = res.data.commodityProjectId
							this.commodityProjectDevice.moneyUnitVIPPrice = res.data.moneyUnitVIPPrice
							this.commodityProjectDevice.onlyOneDeduction = res.data.onlyOneDeduction
							console.log('进入了吗', this.commodityProjectDevice)
						} else {
							this.commodityProjectDevice = {}
						}
					} else {
						this.$helpers.toast(res.msg);
					}
				});
			},
			onlyOneDeductionChange(e) {
				this.commodityProjectDevice.onlyOneDeduction = e;
				this.$forceUpdate();
			}
		},

	}
</script>

<style lang="scss">
	.commodity-project-device {
		padding: 40rpx;
		width: 550rpx;

		.commodity-project-device-title {
			font-size: 28rpx;
			margin-left: 15rpx;
		}

	}

	.container {
		padding: 30rpx 30rpx 0 30rpx;

		.title-position {
			font-size: 30rpx;
			font-weight: 500rpx;
			text-align: center;
		}

		.qrCode-view {
			background-color: $u-bg-color;
			display: flex;
			justify-content: center;
			padding: 60rpx 50rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}

		.qr-code-tips {
			text-align: center;
			color: rgba(0, 0, 0, 0.6);
		}

		.header-information {
			margin-bottom: 50rpx;
			background: rgba(63, 120, 254, 0.05);
			border-radius: 12px;
			padding: 34rpx 30rpx 30rpx 30rpx;

			.title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title-box-bottom {
					display: flex;
					flex-direction: column-reverse;
					align-items: center;

					.title-box-bottom-text {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
					}
				}

				.title {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					line-height: 100rpx;
					flex-wrap: wrap;
					max-width: 600rpx;

					.title-blue {
						color: #3170FF;
					}

					.u-slot-value {
						margin-left: 20rpx;
					}

					.deactivate {
						font-size: 22rpx;
						margin-left: 8rpx;
						border: 1rpx solid rgb(255, 77, 79);
						color: rgb(255, 77, 79);
						border-radius: 6rpx;
						box-sizing: border-box;
						padding: 0 10rpx;
					}
				}
			}

			.site-box {
				font-size: 24rpx;
				margin-top: 15rpx;
				color: rgba(0, 0, 0, 0.6);
			}

			.footbtn {
				margin-top: 50rpx;

				// display: flex;
				// justify-content: space-between;
				// padding: 0 25rpx;
				.footbtn-box {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.footbtn-text {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: rgb(176, 176, 176);
				}

				.bottom-image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.popup-view {
			padding: 50rpx 40rpx 45rpx 40rpx;

			.popup-title {
				text-align: center;
				font-size: $f-lg;
			}

			.footer-btn {
				display: flex;
				margin-top: 30rpx;
			}
		}
	}
</style>